<!--用于集成富文本编辑器 TinyMCE 它可以提供一些基本的文本编辑功能，如粘贴、插入链接、预览等。-->
<template>
  <!--  使用了 Editor 组件来渲染富文本编辑器。
传递了三个 props 给 Editor 组件，分别是 id、init 和 disabled。
id 是编辑器的唯一标识，init 是编辑器的初始化设置，disabled 控制编辑器是否禁用。-->
  <div class="tinymce-editor">
    <Editor
      :id="tinymceId"
      :init="init"
      :disabled="disabled"
    />
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'// 编辑器引入
import 'tinymce/themes/silver/theme'// 编辑器主题
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/paste' // 粘贴过滤
import 'tinymce/plugins/preview' // 预览

export default {
  components: {
    Editor
  },
  // props 包括：
  // value：编辑器的初始内容。
  // disabled：控制编辑器是否禁用。
  // triggerChange：是否触发变化。
  // plugins：编辑器要使用的插件。
  props: {
    // 内容
    value: {
      type: String,
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    triggerChange: {
      type: Boolean,
      default: false,
      required: false
    },
    // 插件
    plugins: {
      type: [String, Array],
      default: () => ['link', 'preview', 'paste']
    }
  },
  //   data 包括：
  // tinymceId：编辑器的唯一标识。
  // myValue：编辑器的内容。
  // mytinymce：tinymce 对象。
  // init：编辑器的初始化设置，包括选择器、语言、皮肤、内容样式、插件、工具栏、高度、占位符、品牌、粘贴预处理、粘贴为文本和初始化实例回调。
  data() {
    return {
      // 初始化配置
      tinymceId: 'tinymce',
      myValue: this.value,
      mytinymce: tinymce,
      init: {
        selector: '#tinymce',
        language_url: '../static/tinymce/langs/zh_CN.js', // 汉化路径是自定义的，一般放在public或static里面
        language: 'zh_CN',
        skin_url: '../static/tinymce/skins/ui/oxide',
        content_css: `../static/tinymce/skins/content/default/content.css`,
        plugins: this.plugins, // 插件
        // 工具栏
        menubar: false, // 隐藏菜单栏
        toolbar: 'undo redo|bold italic forecolor|link preview', // 字体大小
        height: 500, // 高度
        placeholder: '在这里输入文字',
        branding: false, // 隐藏右下角技术支持
        paste_preprocess: function(plugin, args) {
          console.log(args.content)
        },
        paste_as_text: true,
        // init_instance_callback为回调配置项
        // 在 init_instance_callback 中，监听了编辑器的 input 和 change 事件，并在事件触发时，向父组件发出 input 和 change 事件，同时传递编辑器的内容。
        init_instance_callback: (editor) => {
          // console.log(`回调----`)
          editor.on('input', e => {
            // console.log('文本框input触发')
            this.$emit('input', e.target.innerHTML)
          })
          editor.on('change', e => {
            // console.log('文本框change触发')
            this.$emit('change', e.level.content)
          })
        }
      }
    }
  },
  // 在 mounted 钩子函数中，调用了 tinymce.init({}) 来初始化编辑器。
  mounted() {
    tinymce.init({})
  },
  methods: {
  }
}
</script>
